<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圆环进度</title>
		<script>
        	(function(){
				function w() {
				  var r = document.documentElement;
				  var a = r.getBoundingClientRect().width;
				  a > 750 && (a = 750), rem = a / 7.5, r.style.fontSize = rem + "px"
				}
				var t;
				w(), window.addEventListener("resize", function() {
				  t && clearTimeout(t), t = setTimeout(w, 300)
				}, false)	
			})();
        </script>
		<style>
			body {
			font-family: "微软雅黑";
		}
		.circle {
			width: 2.4rem;
			height: 2.4rem;
			position: absolute;
			border-radius: 50%;
			background: #f5a875;
		}
		.pie_left, .pie_right {
			width:2.4rem; 
			height:2.4rem;
			position: absolute;
			top: 0;left: 0;
		}
		.left, .right {
			width:2.4rem; 
			height:2.4rem;
			background:#eaeaea;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.pie_right, .right {
			clip:rect(0,auto,auto,1.2rem);
		}
		.pie_left, .left {
			clip:rect(0,1.2rem,auto,0);
		}
		.mask {
			width: 2.15rem;
			height: 2.15rem;
			top: .124rem;
			left: .124rem;
			border-radius: 50%;
			background: #ff6601;
			position: absolute;
			text-align: center;
			line-height: 2rem;
			font-size: .46rem;
			font-weight: bold;
		}
		.mask a{color: #fff;}
		</style>
	</head>
	<body>
	<div class="circle" style="left:0">
		<div class="pie_left"><div class="left"></div></div>
		<div class="pie_right"><div class="right"></div></div>
		<div class="mask" data-progress="15"><a href="javascript:;">购买</a></div>
	</div>
	<div class="circle" style="left:220px">
		<div class="pie_left"><div class="left"></div></div>
		<div class="pie_right"><div class="right"></div></div>
		<div class="mask" data-progress="15"><a href="javascript:;">购买</a></div>
	</div>
	<div class="circle" style="left:420px">
		<div class="pie_left"><div class="left"></div></div>
		<div class="pie_right"><div class="right"></div></div>
		<div class="mask" data-progress="80"><a href="javascript:;">购买</a></div>
	</div>
	
	<script src="js/jquery-2.2.0.min.js"></script>
	<script>
		$(function() {
			$('.circle').each(function(index, el) {
				var num = $(this).find('.mask').data("progress") * 3.6;
				if (num<=180) {
					$(this).find('.right').css('transform', "rotate(" + num + "deg)");
				} else {
					$(this).find('.right').css('transform', "rotate(180deg)");
					$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
				};
			});

		});
	</script>
	</body>
</html>
